<template>
	<view>
		<!-- <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
		  <image class="avatar" :src="avatarUrl"></image>
		</button> 
		<input type="nickname" class="weui-input" placeholder="请输入昵称"/> -->
		
		<view class="containar">
			<view class="avatarUrl">
				<button type="balanced" open-type="chooseAvatar"         
					   @chooseavatar="onChooseavatar">
					<image :src="avatarUrl" class="refreshIcon"></image>
					<view>点击设置头像</view>
				</button>
			</view>
			<view class="nickname">
				<text>昵称：</text>
				<input type="nickname" class="weui-input" :value="nickName" 
					   @blur="bindblur" placeholder="请输入昵称"
					@input="bindinput" />
			</view>
			<!-- onSubmit -->
			<view class="btn">
				<view class="btn-sub" @click="saveNickInfo">授权</view>
			</view>
		</view>
	</view>
</template>

<script>
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
	import Api from '@/common/api';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				avatarUrl: defaultAvatarUrl,
				nickName: ''
			}
		},
		methods: {
			bindblur(e) {
				 this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.nickName = e.detail.value;
			},
			onChooseavatar(e) {
				let that = this;
			    const avatarUrl  = e.detail.avatarUrl; 
			    that.avatarUrl = avatarUrl;
				uni.uploadFile({
					url: Api.BASEURI + 'member/upload', //仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'file',
					formData: {
						"memberId": that.userInfo.userInfo.id,
						"storeid": Api.STORE_ID
					},
					success: uploadFileRes => {
						console.log(JSON.parse(uploadFileRes.data));
					}
				});
			},
			async saveNickInfo(){
				var that = this;
				let params = {
					memberId: that.userInfo.userInfo.id,
					nickname: that.nickName
				};
				let result = await Api.apiCall('post', Api.member.updateMemberNick, params);
				if(result){
					that.$core.msg("更新昵称成功.");
					uni.switchTab({
						url:'/pages/meallist/selectRoom'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.containar {
		width: 100%;
		height: 75%;

		.avatarUrl {
			padding: 30rpx 0 40rpx;
			background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				width: auto;
				padding: 20rpx 30rpx;
				border: 1rpx solid #f1f1f1;
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.nickname {
			background: #fff;
			padding: 20rpx 30rpx 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1rpx solid #f1f1f1;

			.weui-input {
				padding-left: 60rpx;
			}
		}

		.btn {
			width: 100%;
			.btn-sub {
				width: 468rpx;
				margin: auto;
				height: 100rpx;
				border-radius: 25rpx;
				font-size: 40rpx;
				color: #ffffff;
				line-height: 100rpx;
				text-align: center;
				font-size: 36rpx;
				background-color: #3A9A7E;
			}
		}
	}
</style>
